<template>
  <div class="admin-container">
    <div class="page-header">
      <h2>数据统计</h2>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-cards">
      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <div class="stat-icon primary">
            <el-icon><i-ep-user /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ userCount }}</div>
            <div class="stat-label">用户总数</div>
          </div>
        </div>
      </el-card>

      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <div class="stat-icon success">
            <el-icon><i-ep-goods /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ productCount }}</div>
            <div class="stat-label">商品总数</div>
          </div>
        </div>
      </el-card>

      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <div class="stat-icon warning">
            <el-icon><i-ep-shopping-cart /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">{{ orderCount }}</div>
            <div class="stat-label">订单总数</div>
          </div>
        </div>
      </el-card>

      <el-card shadow="hover" class="stat-card">
        <div class="stat-content">
          <div class="stat-icon danger">
            <el-icon><i-ep-money /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-number">¥{{ totalSales.toFixed(2) }}</div>
            <div class="stat-label">总销售额</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 图表区域 -->
    <div class="charts-container">
      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>近期销售额趋势</span>
            <el-select v-model="chartRange" placeholder="选择时间范围">
              <el-option label="近7天" value="7" />
              <el-option label="近30天" value="30" />
              <el-option label="近90天" value="90" />
              <el-option label="近1年" value="365" />
            </el-select>
          </div>
        </template>
        <div class="chart-wrapper">
          <!-- 在实际项目中，这里应该使用ECharts等图表库 -->
          <div class="chart-placeholder">
            <el-icon class="chart-icon"><i-ep-data-line /></el-icon>
            <p>销售额趋势图表</p>
          </div>
        </div>
      </el-card>

      <el-card class="chart-card">
        <template #header>
          <div class="card-header">
            <span>商品分类占比</span>
          </div>
        </template>
        <div class="chart-wrapper">
          <!-- 在实际项目中，这里应该使用ECharts等图表库 -->
          <div class="chart-placeholder">
            <el-icon class="chart-icon"><i-ep-data-analysis /></el-icon>
            <p>分类占比饼图</p>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 数据表格 -->
    <div class="data-tables">
      <el-card class="table-card">
        <template #header>
          <div class="card-header">
            <span>热门商品排行</span>
          </div>
        </template>
        <el-table :data="topProducts" style="width: 100%">
          <el-table-column prop="rank" label="排名" width="80" type="index" :index="index => index + 1" />
          <el-table-column label="商品信息" width="300">
            <template #default="scope">
              <div class="product-info">
                <img :src="scope.row.image" alt="商品图片" class="product-image">
                <div class="product-details">
                  <div class="product-title">{{ scope.row.title }}</div>
                  <div class="product-price">¥{{ scope.row.price.toFixed(2) }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="sales" label="销量" width="120" />
          <el-table-column prop="revenue" label="销售额" width="150">
            <template #default="scope">
              <span class="revenue">¥{{ scope.row.revenue.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="categoryName" label="分类" width="120" />
        </el-table>
      </el-card>

      <el-card class="table-card">
        <template #header>
          <div class="card-header">
            <span>活跃用户排行</span>
          </div>
        </template>
        <el-table :data="activeUsers" style="width: 100%">
          <el-table-column prop="rank" label="排名" width="80" type="index" :index="index => index + 1" />
          <el-table-column label="用户信息" width="200">
            <template #default="scope">
              <div class="user-info">
                <img :src="scope.row.avatar || '/images/default-avatar.png'" alt="头像" class="avatar">
                <div class="user-details">
                  <div class="username">{{ scope.row.username }}</div>
                  <div class="user-role">{{ getRoleText(scope.row.role) }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="orders" label="订单数" width="120" />
          <el-table-column prop="spent" label="消费金额" width="150">
            <template #default="scope">
              <span class="spent">¥{{ scope.row.spent.toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="lastActive" label="最后活跃" width="180" />
        </el-table>
      </el-card>
    </div>

    <!-- 运营数据 -->
    <el-card class="operation-data">
      <template #header>
        <div class="card-header">
          <span>运营数据详情</span>
        </div>
      </template>
      <div class="operation-stats">
        <div class="stat-item">
          <div class="stat-value">{{ newUsers }}</div>
          <div class="stat-desc">新增用户</div>
          <div class="stat-change" :class="newUsersChange > 0 ? 'positive' : 'negative'">
            <el-icon v-if="newUsersChange > 0"><i-ep-caret-top /></el-icon>
            <el-icon v-else-if="newUsersChange < 0"><i-ep-caret-bottom /></el-icon>
            {{ Math.abs(newUsersChange) }}%
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ newProducts }}</div>
          <div class="stat-desc">新增商品</div>
          <div class="stat-change" :class="newProductsChange > 0 ? 'positive' : 'negative'">
            <el-icon v-if="newProductsChange > 0"><i-ep-caret-top /></el-icon>
            <el-icon v-else-if="newProductsChange < 0"><i-ep-caret-bottom /></el-icon>
            {{ Math.abs(newProductsChange) }}%
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ newOrders }}</div>
          <div class="stat-desc">新增订单</div>
          <div class="stat-change" :class="newOrdersChange > 0 ? 'positive' : 'negative'">
            <el-icon v-if="newOrdersChange > 0"><i-ep-caret-top /></el-icon>
            <el-icon v-else-if="newOrdersChange < 0"><i-ep-caret-bottom /></el-icon>
            {{ Math.abs(newOrdersChange) }}%
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ conversionRate }}%</div>
          <div class="stat-desc">转化率</div>
          <div class="stat-change" :class="conversionRateChange > 0 ? 'positive' : 'negative'">
            <el-icon v-if="conversionRateChange > 0"><i-ep-caret-top /></el-icon>
            <el-icon v-else-if="conversionRateChange < 0"><i-ep-caret-bottom /></el-icon>
            {{ Math.abs(conversionRateChange) }}%
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ avgOrderValue.toFixed(2) }}</div>
          <div class="stat-desc">客单价(元)</div>
          <div class="stat-change" :class="avgOrderValueChange > 0 ? 'positive' : 'negative'">
            <el-icon v-if="avgOrderValueChange > 0"><i-ep-caret-top /></el-icon>
            <el-icon v-else-if="avgOrderValueChange < 0"><i-ep-caret-bottom /></el-icon>
            {{ Math.abs(avgOrderValueChange) }}%
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ userRetention }}%</div>
          <div class="stat-desc">用户留存率</div>
          <div class="stat-change" :class="userRetentionChange > 0 ? 'positive' : 'negative'">
            <el-icon v-if="userRetentionChange > 0"><i-ep-caret-top /></el-icon>
            <el-icon v-else-if="userRetentionChange < 0"><i-ep-caret-bottom /></el-icon>
            {{ Math.abs(userRetentionChange) }}%
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const isLoading = ref(false)
const chartRange = ref('7')

// 基础统计数据
const userCount = ref(1250)
const productCount = ref(3680)
const orderCount = ref(5890)
const totalSales = ref(1258000)

// 新增数据
const newUsers = ref(89)
const newProducts = ref(234)
const newOrders = ref(456)

// 增长率数据
const newUsersChange = ref(12.5)
const newProductsChange = ref(8.3)
const newOrdersChange = ref(15.7)
const conversionRate = ref(8.2)
const conversionRateChange = ref(0.5)
const avgOrderValue = ref(213.5)
const avgOrderValueChange = ref(3.2)
const userRetention = ref(68.5)
const userRetentionChange = ref(-1.2)

// 热门商品数据
const topProducts = ref([
  {
    id: 101,
    title: '全新 小米13 8+256G 黑色 国行正品',
    image: '/images/phone1.jpg',
    price: 3599,
    sales: 156,
    revenue: 561444,
    categoryName: '手机数码'
  },
  {
    id: 102,
    title: 'MacBook Pro 2022 14英寸 M2 Pro芯片',
    image: '/images/laptop1.jpg',
    price: 14999,
    sales: 45,
    revenue: 674955,
    categoryName: '电脑办公'
  },
  {
    id: 103,
    title: 'Nike Air Force 1 空军一号 白色',
    image: '/images/shoes1.jpg',
    price: 799,
    sales: 234,
    revenue: 187966,
    categoryName: '服装鞋包'
  },
  {
    id: 104,
    title: '考研英语词汇 乱序版',
    image: '/images/book1.jpg',
    price: 25,
    sales: 1250,
    revenue: 31250,
    categoryName: '图书文具'
  },
  {
    id: 105,
    title: '全新 华为 MateBook X Pro 13.9英寸',
    image: '/images/laptop2.jpg',
    price: 8999,
    sales: 67,
    revenue: 602933,
    categoryName: '电脑办公'
  }
])

// 活跃用户数据
const activeUsers = ref([
  {
    id: 2,
    username: 'zhangsan',
    avatar: '/images/user1-avatar.png',
    role: 'seller',
    orders: 28,
    spent: 52300,
    lastActive: '2023-11-11 10:30:45'
  },
  {
    id: 3,
    username: 'lisi',
    avatar: '',
    role: 'user',
    orders: 45,
    spent: 78200,
    lastActive: '2023-11-11 09:15:30'
  },
  {
    id: 5,
    username: 'zhaoliu',
    avatar: '/images/user3-avatar.png',
    role: 'seller',
    orders: 36,
    spent: 45600,
    lastActive: '2023-11-10 20:45:12'
  },
  {
    id: 4,
    username: 'wangwu',
    avatar: '/images/user2-avatar.png',
    role: 'user',
    orders: 23,
    spent: 32500,
    lastActive: '2023-11-10 16:20:00'
  },
  {
    id: 6,
    username: 'sunqi',
    avatar: '/images/user4-avatar.png',
    role: 'user',
    orders: 19,
    spent: 28900,
    lastActive: '2023-11-10 14:10:25'
  }
])

onMounted(() => {
  loadStatistics()
})

const loadStatistics = async () => {
  isLoading.value = true
  
  try {
    // 在实际项目中，这里应该从API获取统计数据
    // 模拟数据加载延迟
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 数据已在组件中初始化，这里仅做演示
  } catch (error) {
    ElMessage.error('加载统计数据失败，请稍后重试')
    console.error('加载统计数据失败:', error)
  } finally {
    isLoading.value = false
  }
}

const getRoleText = (role) => {
  const roleMap = {
    user: '普通用户',
    seller: '卖家',
    admin: '管理员'
  }
  return roleMap[role] || '未知角色'
}
</script>

<style scoped>
.admin-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h2 {
  font-size: 24px;
  color: #333;
}

/* 统计卡片 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  transition: transform 0.3s, box-shadow 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.stat-icon.primary {
  background: rgba(64, 158, 255, 0.1);
  color: #409eff;
}

.stat-icon.success {
  background: rgba(103, 194, 58, 0.1);
  color: #67c23a;
}

.stat-icon.warning {
  background: rgba(230, 162, 60, 0.1);
  color: #e6a23c;
}

.stat-icon.danger {
  background: rgba(245, 108, 108, 0.1);
  color: #f56c6c;
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #999;
}

/* 图表容器 */
.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.chart-card {
  height: 400px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-wrapper {
  height: calc(100% - 60px);
  position: relative;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  border-radius: 4px;
}

.chart-icon {
  font-size: 60px;
  color: #e0e0e0;
  margin-bottom: 20px;
}

.chart-placeholder p {
  color: #999;
  font-size: 16px;
}

/* 数据表格 */
.data-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.table-card {
  min-height: 400px;
}

.product-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.product-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

.product-details {
  flex: 1;
}

.product-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price {
  font-size: 16px;
  color: #ff4d4f;
  font-weight: bold;
}

.revenue,
.spent {
  color: #ff4d4f;
  font-weight: bold;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.user-details {
  flex: 1;
}

.username {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
}

.user-role {
  font-size: 12px;
  color: #999;
}

/* 运营数据 */
.operation-data {
  margin-bottom: 30px;
}

.operation-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: #fafafa;
  border-radius: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.stat-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.stat-change {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.stat-change.positive {
  color: #67c23a;
}

.stat-change.negative {
  color: #f56c6c;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .charts-container,
  .data-tables {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .chart-card {
    height: 300px;
  }
  
  .operation-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .operation-stats {
    grid-template-columns: 1fr;
  }
  
  .stat-number {
    font-size: 24px;
  }
  
  .product-info,
  .user-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .avatar,
  .product-image {
    align-self: center;
  }
}
</style>